<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import TodoItemVue from './TodoItem.vue';
	const awesome = ref(true)

	const parentMessage = ref('Parent')
	const items = ref([{
		message: 'Foo'
	}, {
		message: 'Bar'
	}])

	const myObject = reactive({
		title: 'How to do lists in Vue',
		author: 'Jane Doe',
		publishedAt: '2016-04-10'
	})

	const numbers = ref([1, 2, 3, 4, 5])

	const evenNumbers = computed(() => {
		return numbers.value.filter((n) => n % 2 === 0)
	})

	const sets = ref([
		[1, 2, 3, 4, 5],
		[6, 7, 8, 9, 10]
	])

	function even(numbers) {
		return numbers.filter((number) => number % 2 === 0)
	}


	const newTodoText = ref('')
	const todos = ref([{
			id: 1,
			title: 'Do the dishes'
		},
		{
			id: 2,
			title: 'Take out the trash'
		},
		{
			id: 3,
			title: 'Mow the lawn'
		}
	])

	let nextTodoId = 4

	function addNewTodo() {
		todos.value.push({
			id: nextTodoId++,
			title: newTodoText.value
		})
		newTodoText.value = ''
	}
</script>

<template>
	<button @click="awesome = !awesome">toggle</button>
	<h1 v-if="awesome">Vue is awesome!</h1>
	<h1 v-else>Oh no 😢</h1>
	<li v-for="(item,index) in items">
		{{parentMessage}} - {{index}} - {{item.message}}
	</li>
	<li v-for="({message},index) in items">
		{{message}} {{index}}
	</li>
	<ul>
		<li v-for="item in myObject">
			{{item}}
		</li>
	</ul>
	<li v-for="(value,key,index) in myObject">
		{{value}}:{{key}}:{{index}}
	</li>
	<span v-for="n in 10">{{ n }},</span>
	<br />

	<span v-for="n in evenNumbers">{{ n }},</span>
	<ul v-for="item in sets">
		<li v-for="n in even(item)">
			{{n}}
		</li>
	</ul>

	<form v-on:submit.prevent="addNewTodo">
		<label for="new-todo">Add a todo</label>
		<input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" />
		<button>Add</button>
	</form>
	<ul>
		<TodoItemVue v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)">
		</TodoItemVue>
	</ul>

</template>



<style>
	.active {
		color: chocolate;
	}
</style>